<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>增加批发价格单</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../../../../elementUI/index.css">
  <link rel="stylesheet" href="../../../../css/index.css">
  <style>
    .el-checkbox-button.is-checked .el-checkbox-button__inner{
      background-color: #409EFF;
      color: #fff;
      border-color: #409EFF
    }
    /* .el-form-item__content{
      position:relative;
    } */
    .el-form-item__error .el-form-item__error--inline{
      width: 50%;
    }
  </style>
</head>

<body>
  <div id="app" class="minWidth">
    <el-form :model="form" :rules="rules" ref="contract" inline-message="true" style="width: 100%">
      <div class="table_titel">
        <div class="titel">增加批发价格单</div>
      </div>
      <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="开始时间">
          <el-form-item prop="Start_Date">
            <el-date-picker clearable v-model.trim="form.Start_Date" type="datetime" placeholder="请选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="结算时间">
          <el-form-item prop="End_Date">
            <el-date-picker clearable v-model.trim="form.End_Date" type="datetime" placeholder="请选择结算时间"
              value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="独立上架">
          <el-form-item>
            <el-radio @change="Independence" v-model="form.Independence" label="1">是</el-radio>
            <el-radio @change="Independence" v-model="form.Independence" label="0">否</el-radio>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="商品">
          <el-form-item prop="Article_SerialNumber">
            <el-select v-if="form.Independence=='0'" clearable v-model.trim="form.Article_SerialNumber" placeholder="请选择商品" filterable
              @change="ChangeArticle" style="width: 100%">
              <el-option v-for="(item,index) in article_info" :key="index"
                :label="item.Article_Name+'(剩余数量:'+item.Remain_Quantity+')'" :value="item.Article_SerialNumber">
                {{item.Article_Name+'(剩余数量:'+item.Remain_Quantity+')'}}
              </el-option>
            </el-select>
            <el-select v-if="form.Independence=='1'" clearable v-model.trim="form.Article_SerialNumber" placeholder="请选择商品" filterable
              @change="ChangeArticle" style="width: 100%">
              <el-option v-for="(item,index) in article_info" :key="index" :label="item.Article_Name" :value="item.Article_SerialNumber"></el-option>
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="商品规格">
          <el-form-item prop="Article_Specifications_SerialNumber">
            <el-select :disabled="article_specifications.length==0" clearable v-model.trim="form.Article_Specifications_SerialNumber" placeholder="请选择商品规格" filterable style="width: 100%">
              <el-option v-for="(item,index) in article_specifications" :key="index"
                :label="item.Specifications_Name+'(SKU数量:'+item.Packing+')'" :value="item.Article_Specifications_SerialNumber">
                {{item.Specifications_Name+'(SKU数量:'+item.Packing+')'}}
              </el-option>
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="每次最小单元量">
          <el-form-item prop="Unit_Quantity">
            <el-input-number v-model="form.Unit_Quantity" :min="1"></el-input-number>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="起步最低单元量">
          <el-form-item prop="Starting_Quantity">
            <el-input-number  v-model="form.Starting_Quantity" :min="1"></el-input-number>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="商品上架数量">
          <el-form-item prop="Quantity">
            <el-input-number v-model="form.Quantity" :min="form.Unit_Quantity"></el-input-number>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
      <div class="table_titel">
        <div class="titel">批发价格单仓库</div>
        <div class="operation">
          <el-button type="primary" size="small" @click="add_wholesale_unitprice_warehouse">新增</el-button>
          <el-button type="danger" size="small" @click="remove_wholesale_unitprice_warehouse">删除</el-button>
        </div>
      </div>
      <el-descriptions v-for="(item,i) in form.Children.wholesale_unitprice_warehouse" :column="2" border size="small">
        <el-descriptions-item :label="i+1+'.仓库'">
          <el-form-item>
            <el-select v-if="form.Independence=='0'" @change="ChangeWare($event,i)" v-model.trim="item.Warehouse_SerialNumber"
              :disabled="disabledSelect" placeholder="请选择仓库" filterable style="width: 100%">
              <el-option
                v-for="(item_,index_) in item.Wares.filter(item=>!isWares.some(id=>id.value==item.Warehouse_SerialNumber&&id.index!=i))"
                :key="index_" :label="`${item_.Warehouse_Name}(剩余数量${item_.Remain_Quantity})`"
                :value="item_.Warehouse_SerialNumber"></el-option>
            </el-select>
          </el-form-item>
          <el-select v-if="form.Independence=='1'" @change="ChangeWare($event,i)" v-model.trim="item.Warehouse_SerialNumber"
              placeholder="请选择仓库" filterable style="width: 100%">
              <el-option
                v-for="(item_,index_) in item.Wares.filter(item=>!isWares.some(id=>id.value==item.Warehouse_SerialNumber&&id.index!=i))"
                :key="index_" :label="item_.Warehouse_Name"
                :value="item_.Parent_Warehouse_SerialNumber!=''?item_.Parent_Warehouse_SerialNumber:item_.Warehouse_SerialNumber"></el-option>
            </el-select>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
      <div style="margin-bottom: 100px;">
        <div class="table_titel">
          <div class="titel">阶梯式付款细则</div>
          <div class="operation">
            <el-button type="primary" size="small" @click="addPaystages">新增方案</el-button>
            <el-button type="danger" size="small" @click="removePaystages">删除方案</el-button>
          </div>
        </div>
        <div style=" padding: 10px; margin: auto; margin-bottom: 10px; border: 1px solid #ebebeb; border-radius: 5px;" v-for="(obj,id) in PayWay" :key="id">
          <div class="table_titel">
            <div class="titel">方案{{toChinesNum(id+1)}}</div>
            <div class="titel">
              <el-checkbox-group v-model="obj.checkboxGroup" size="medium">
                <el-checkbox-button :disabled="obj.checkboxGroup.length==1&&obj.checkboxGroup.some(item=>item=='0')" label="0">全款</el-checkbox-button>
                <el-checkbox-button :disabled="obj.checkboxGroup.length==1&&obj.checkboxGroup.some(item=>item=='1')" label="1">账期</el-checkbox-button>
              </el-checkbox-group>
            </div>
            <div class="titel">
                商品单价：<el-input style="width: 100px;" @change="Unit_Price($event,obj)" v-model="obj.Unit_Price"></el-input>
                最低购买数量：<el-input style="width: 100px;" :disabled="id=='0'" @input="Min_Quantity($event,obj)" v-model="obj.Min_Quantity"></el-input>
            </div>
            <div class="operation">
              <el-button type="primary" size="small" @click="addUserIdentity(obj)">新增适用用户</el-button>
              <el-button type="danger" size="small" @click="removeUserIdentity(obj)">删除</el-button>
            </div>
          </div>
          <div style="box-sizing: border-box;  margin: auto;margin-bottom: 10px; padding-top: 20px; border-top: 3px solid #ebebeb; border-radius: 50px;" v-for="(User,i) in obj.User_Identity" :key="i">
            <div class="table_titel" style="position: relative;">
              <div v-if="obj.checkboxGroup.some(item=>item=='0')" class="titel">全款细则</div>
              <div class="titel" style="position: absolute; right: 50%;">
                适用身份：<el-select @change="User_Type($event,User)" v-model.trim="User.User_Type" placeholder="请选择适用的用户身份" filterable>
                  <el-option v-for="item in UserType" :key="item.id" :label="item.value" :value="item.id"></el-option>
                </el-select>
              </div>
            </div>
            <el-descriptions v-if="obj.checkboxGroup.some(item=>item=='0')" :column="4" border size="small">
              <el-descriptions-item label="优惠额度">
                <el-form-item>
                  <el-input v-model.trim="User.Full_Payment.Trading_Percentage" type="Number" placeholder="请输入额度"></el-input>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
            <div v-if="obj.checkboxGroup.some(item=>item=='1')" class="table_titel">
              <div class="titel">按步骤支付细则</div>
              <div class="operation">
                <el-button type="primary" size="small" @click="addPayWay(User,obj)">新增</el-button>
                <el-button type="danger" size="small" @click="removePayWay(User,obj)">删除</el-button>
              </div>
            </div>
            <el-descriptions v-if="obj.checkboxGroup.some(item=>item=='1')" :column="5" border size="small" v-for="(item,index) in User.Payment_Days" :key="index">
              <el-descriptions-item :label="'付款阶段名称'">
                <el-form-item>
                  <el-input v-model.trim="item.Trading_Explain" placeholder="请输入付款阶段名称"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="付款额度">
                <el-form-item>
                  <el-input v-model.trim="item.Trading_Percentage" type="Number" placeholder="请输入付款额度"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="付款节点">
                <el-form-item>
                  <div style="display: flex;align-items: center;">
                    <el-select @change="ChangePaymentDetail($event,index,item,User)" v-model="item.Trading_Detail_SerialNumber"
                      placeholder="请选择" clearable >
                      <el-option v-for="item_ in item.PaymentDetail.filter(e=>!User.isArr.some(i=>i.id==e.Trading_Detail_SerialNumber&&i.index!=index))"
                        :key="item_.value" :label="item_.Trading_Detail_Name" :value="item_.Trading_Detail_SerialNumber">
                      </el-option>
                    </el-select>
                    <el-input-number v-model="item.Trading_Days"></el-input-number>
                  </div>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
      <el-form-item class="form-operation">
        <el-button @click="window.history.back()">返回</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm('contract')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
  <script type="text/javascript" src="../../../../js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="../../../../js/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../../../js/vue.min.js"></script>
  <script type="text/javascript" src="../../../../elementUI/index.js"></script>
  <script type="text/javascript" src="../../../../js/utils.js"></script>
  <script type="text/javascript" src="../../../../js/ID_Validity.js"></script>
  <script type="text/javascript" src="./js/Edit.js"></script>
</body>

</html>